<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script src="js/main.js"></script>
    <title>Static Template</title>
    <style>
     svg {
       width: 400px;
       height: 200px;
     }
    </style>
    <link href="https://fonts.googleapis.com/css?family=Akronim"
          rel="stylesheet"
          type="text/css" />
  </head>
  <body>
    <svg width="400" height="200" viewBox="0 0 400 200">
      <rect x="1"
            y="1"
            width="398"
            height="198"
            fill="transparent"
            stroke="blue" >
      </rect>
      <foreignObject x="0"
                     y="0"
                     id="09b1f590-b063-11ea-8678-7de6e9a67cb9"
                     width="400"
                     height="200">
        <div class="root rich-text" style="height: 100%; width: 100%; display: flex; align-items: center">
          <div class="paragraphs" style="display: inline-block; width: 100%">
            <p style="font-size: 14px; margin: inherit; line-height: 1.2; text-align: center">
              <span style="font-size: 36px; font-family: Roboto; font-style: normal; font-weight: 400; color: #66462C">
                Explore the different configuration options available for
              </span>
              <span style="font-size: 36px; font-family: Akronim; font-style: normal; color: #184d47 ">
                html2canvas
              </span>
            </p>
          </div>
        </div>
      </foreignObject>
    </svg>
  </body>
</html>
